const path = require('path')
const webpack = require('webpack')
const htmlwebpackplugin = require('html-webpack-plugin')
//引入Vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// mock数据
const express = require('express')
const app = express() //请求json-server
var appData = require('./data.json') //加载本地数据
var lunbo = appData.lunbo  //定义轮播图数据的接口
var news = appData.news  //定义新闻数据的接口
var photoType = appData.photoType //定义图片分类数据的接口
var images = appData.images //定义图片数据的接口
var imageInfo = appData.imageInfo //定义图片详情接口
var img = appData.img //定义图片缩略图的接口
var cmt11 = appData.comments11 //定义新闻评论的接口
var cmt12 = appData.comments12
var cmt21 = appData.comments21 //定义图片评论的接口
var cmt22 = appData.comments22
var goods = appData.goods //定义商品数据的接口
var goodsimg = appData.goodsimg //定义商品图片
var apiRoutes = express.Router() //创建一个api的路由
app.use('/api',apiRoutes)//通过调用api路由,请求数据

module.exports = {
	entry:path.join(__dirname, 'src/main.js'),
	
	output: {//出口文件配置
		path: path.join(__dirname,'dist'),
		filename: 'bundle.js' 
	},
	devServer: {
		open: true,
		port:3000, 
		contentBase: '/', 
		hot: true ,
		before(app){
			//使用api的方法创建连接时的请求，get接口有两个参数 参数1：req发起请求 参数2:resp接收返回的信息
			app.get('/api/lunbo',(req,resp)=>{
				resp.json({
					errno:0,
					data:lunbo
				})
			}),
			app.get('/api/news',(res,resp)=>{
				resp.json({
					errno:0,
					data:news
				})
			}),
			app.get('/api/photoType',(res,resp)=>{
				resp.json({
					errno:0,
					data:photoType
				})
			}),
			app.get('/api/images',(res,resp)=>{
				resp.json({
					errno:0,
					data:images
				})
			}),
			app.get('/api/imageInfo',(res,resp)=>{
				resp.json({
					errno:0,
					data:imageInfo
				})
			}),
			app.get('/api/img',(res,resp)=>{
				resp.json({
					errno:0,
					data:img
				})
			}),
			app.get('/api/comments11',(res,resp)=>{
				resp.json({
					errno:0,
					data:cmt11
				})
			}),
			app.get('/api/comments12',(res,resp)=>{
				resp.json({
					errno:0,
					data:cmt12
				})
			}),
			app.get('/api/comments21',(res,resp)=>{
				resp.json({
					errno:0,
					data:cmt21
				})
			}),
			app.get('/api/comments22',(res,resp)=>{
				resp.json({
					errno:0,
					data:cmt22
				})
			}),
			app.get('/api/goods',(res,resp)=>{
				resp.json({
					errno:0,
					data:goods
				})
			}),
			app.get('/api/goodsimg',(res,resp)=>{
				resp.json({
					errno:0,
					data:goodsimg
				})
			})

		}
	},
	plugins: [//配置插件的节点
		//创建一个在内存中生成HTML页面的插件，
		new htmlwebpackplugin({
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html'
		}),
		new VueLoaderPlugin()
	],
	module: {
		rules: [
			{ test:/\.css$/, use: ['style-loader', 'css-loader']},
			{ test:/\.less$/, use: ['style-loader', 'css-loader','less-loader'] }, 
			{ test:/\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] },
			{ test:/\.(jpg|png|gif|bmp)$/, use: ['url-loader?limit=17164&name=[hash:8]-[name].[ext]']}, 
			{ test: /\.(ttf|eot|svg|woff|woff2)$/, use:['url-loader']},
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
			{ test:/\.vue$/, use: 'vue-loader'} //处理.vue文件的loader
		]
		
	},
	resolve: {
		//extenions:['.js', '.vue', '.json'], 省略后缀
		alias:{
			//设置vue被导入时的路径
			//"vue$": "vue/dist/vue.js"
		}
	}
}